<template>
	<view class="info">
		<!-- 信息 -->
		<view class="info-item" @click="toComment">
			<view class="hearder">
				<u-image width="80rpx" height="80rpx" shape="circle" src="/static/dome/touxiang.jpg"></u-image>
				<view class="title">
					<view class="username">有梦可追</view>
					<text class="date">1天前</text>
				</view>
			</view>
			<view class="wenzi u-line-3">
				国四CAT ® 320 GX 比国三320 GX动作更快，产量提高显著；无需使用尿素溶液，可靠的尾气后处理装置，生命周期内无需维护，而且无需专门停车再生，从而增加了作业时间，整机配置简洁可靠。
			</view>
			<view class="tupian">
				<u-image class="img" width="400rpx" height="400rpx" src="/static/dome/wujueji.webp"></u-image>
				<u-image class="img" width="300rpx" height="400rpx" src="/static/dome/c1.jpg"></u-image>
			</view>
			<view class="dibu">
				<u-icon name="zhuanfa" label="分享" size="36rpx"></u-icon>
				<u-icon name="chat" label="29" size="36rpx"></u-icon>
				<u-icon name="thumb-up" label="220" size="36rpx"></u-icon>
				<u-icon name="star" label="收藏" size="36rpx"></u-icon>
			</view>
		</view>
		<!-- 2 -->
		<view class="info-item">
			<view class="hearder">
				<u-image width="80rpx" height="80rpx" shape="circle" src="/static/dome/touxiang.jpg"></u-image>
				<view class="title">
					<view class="username">有梦可追</view>
					<text class="date">1天前</text>
				</view>
			</view>
			<view class="wenzi u-line-3">
				国四CAT ® 320 GX 比国三320 GX动作更快，产量提高显著；无需使用尿素溶液，可靠的尾气后处理装置，生命周期内无需维护，而且无需专门停车再生，从而增加了作业时间，整机配置简洁可靠。
			</view>
			<u-image width="400rpx" height="400rpx" src="/static/dome/wujueji.webp"></u-image>
			<view class="dibu">
				<u-icon name="zhuanfa" label="分享" size="36rpx"></u-icon>
				<u-icon name="chat" label="29" size="36rpx"></u-icon>
				<u-icon name="thumb-up" label="220" size="36rpx"></u-icon>
				<u-icon name="star" label="收藏" size="36rpx"></u-icon>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toComment() {
				uni.navigateTo({
					url: "/pages/info/comment"
				})
				console.log(22);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f1f1f1;
	}

	.info-item {
		padding: 20rpx;
		margin-bottom: 10rpx;
		background-color: #fff;

		// hearder
		.hearder {
			display: flex;

			.title {
				margin-left: 20rpx;

				.username {
					font-weight: 700;
				}

				.date {
					font-size: 24rpx;
					color: #bebebe;
				}
			}
		}

		// wenzi
		.wenzi {
			margin: 20rpx 0;
		}

		// tupian
		.tupian {
			display: flex;

			.img {
				margin-right: 5rpx;
			}
		}

		// dibu
		.dibu {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-around;
		}
	}
</style>
